'use strict';

import React, {Component, PropTypes} from 'react';
import {Button, Icon} from 'amazeui-react';
import Select from './select';
import ValidateInput from './validate-input';
import {Theme} from '../lib';

export default class SpecialPlanInput extends Component {
	/*
	 * 构造函数。
	 * @param props 属性
	 */
	constructor(props) {
		super(props);
		this.state = {
			plans: this.props.defaultValue ? JSON.parse(this.props.defaultValue) : [],
		};
	}

	/*
	 * 获取输入值。
	 */
	getValue() {
		let data = this.state.plans.map((x, i) => {
			return {
				theme: this.refs['theme' + i].getValue(),
				text: this.refs['text' + i].getValue(),
			};
		});

		for (let i = 0; i < data.length; i++) {
			if (data[i].theme === '' || data[i].text === '') {
				data = [];
				break;
			}
		}

		return JSON.stringify(data);
	}

	/*
	 * 增加主题。
	 */
	add() {
		let plans = [].concat(this.state.plans);
		plans.push({});
		this.setState({
			plans: plans
		});
	}

	/*
	 * 删除主题。
	 */
	delete() {
		let plans = [].concat(this.state.plans);
		plans.pop();
		this.setState({
			plans: plans
		});
	}

	/*
	 * 渲染。
	 */
	render() {
		let themes = [{
			value: '幼儿园主题',
			label: '幼儿园主题',
			children: Theme.toOptions(localStorage.theme, 'type', 0),
		}, {
			value: '中小学主题',
			label: '中小学主题',
			children: Theme.toOptions(localStorage.theme, 'type', 1),
		}];
		let plans = this.state.plans;
		let inputs = plans.map((x, i) => {
			return(
				<div key={i}>
					<h2>{'专项计划' + (i + 1)}</h2>
					<div className="form-row">
						<label>主题：</label>
						<Select 
							layer={3}
							data={themes}
							ref={'theme' + i}
							defaultValue={x.theme}
						/>
					</div>
					<h3>说明：</h3>
					<ValidateInput 
						type="textarea"
						rules="required"
						style={{
							height: 200
						}}
						ref={'text' + i}
						defaultValue={x.text}
					/>
				</div>
			);
		});

		return (
			<div>
				{inputs}
				<span>是否需要添加专项计划？</span>
				<Button 
					amStyle="link"
					onClick={this.add.bind(this)}
					style={{
						color: '#1feb15'
					}}
				>
					<Icon 
						icon="plus-circle" 
						size="lg"
					/>
				</Button>
				<Button 
					amStyle="link"
					onClick={this.delete.bind(this)}
					style={{
						color: 'red'
					}}
				>
					<Icon 
						icon="minus-circle" 
						size="lg"
					/>
				</Button>
			</div>
		);
	}
}

SpecialPlanInput.propTypes = {
	defaultValue: PropTypes.string,
};
SpecialPlanInput.defaultProps = {};
